import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { LunboInfoApi, ZuFaInfoApi, NewsInfoApi } from "@/apis/home.js"
import {getCurrentCity} from "@/utils/index.js"
import { useNavigate } from 'react-router-dom';

import './index.scss'

import Nav1 from "@/assets/images/nav-1.png"
import Nav2 from "@/assets/images/nav-2.png"
import Nav3 from "@/assets/images/nav-3.png"
import Nav4 from "@/assets/images/nav-4.png"

// 导入搜索导航栏组件
import SearchHeader from '@/components/SearchHeader'
const Home = () => {

    //是否展示轮播图,默认不显示，加载完成数据展示
    const [swiperState, setSwiperState] = useState(false)
    // 轮播图图片信息
    let [lunboInfo, setLunboInfo] = useState([])
    //轮播图高度信息
    let [lunboHeight, setLunboHeight] = useState(212)
    //租房小组信息
    let [zufaInfo, setZufaInfo] = useState([])
    //最新咨询数据
    let [newInfo, setNewInfo] = useState([])
    //当前定位城市
    let [CurrentCity,setCurrentCity] = useState("上海")
    //导航信息
    let navInfo = [
        {
            id: 1,
            img: Nav1,
            title: "整租",
            path: "/home/list"
        },
        {
            id: 2,
            img: Nav2,
            title: "合租",
            path: "/home/list"
        },
        {
            id: 3,
            img: Nav3,
            title: "地图找房",
            path: "/home/houselist"
        },
        {
            id: 4,
            img: Nav4,
            title: "去出租",
            path: "/home/list"
        }
    ]


    //异步执行hook钩子
    useEffect(() => {
        //获取轮播图数据
        getLunboInfo()
        //获取租房小组数据
        getZufu()
        //获取最新咨询数据
        getNewsInfo()
        //获取当前定位城市信息
        getCityInfo()
    }, [])
    //获取轮播图列表信息
    async function getLunboInfo() {
        const res = await LunboInfoApi()
        setLunboInfo(res.body)
        setSwiperState(true)
    }
    //获取租房小组数据
    async function getZufu() {
        const res = await ZuFaInfoApi()
        setZufaInfo(res.body)
    }
    //获取最新咨询数据
    async function getNewsInfo() {
        const res = await NewsInfoApi()
        setNewInfo(res.body)
    }
    //获取当前定位城市的信息
    async function getCityInfo() {
        const res=await getCurrentCity()
        console.log(res);
        setCurrentCity(res.label)
    }

    //初始化跳转对象
    const navigate = useNavigate()
    return (
        <div className='home-box'>
            {/* 轮播图区域 */}
            <div className='lunbo'>
                {swiperState && (
                    <Carousel
                        autoplay
                        infinite
                    >
                        {lunboInfo.map(val => (
                            <a
                                key={val.id}
                                href=""
                                style={{ display: 'inline-block', width: '100%', height: lunboHeight }}
                            >
                                <img
                                    src={`http://localhost:8080${val.imgSrc}`}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                />
                            </a>
                        ))}
                    </Carousel>
                )}
                {/* 搜索框 */}
                <SearchHeader cityName={CurrentCity} />
            </div>
            {/* 导航栏区域 */}
            <div className='nav'>
                <Flex>
                    {
                        navInfo.map(item => (
                            <Flex.Item key={item.id} onClick={() => navigate(item.path)}>
                                <img src={item.img}></img>
                                <div className='title'>{item.title}</div>
                            </Flex.Item>
                        ))
                    }
                </Flex>
            </div>
            {/* 租房小组 */}
            <div className="group">
                <h3 className="group-title">
                    租房小组 <span className="more">更多</span>
                </h3>

                {/* 宫格组件 */}
                <Grid
                    data={zufaInfo}
                    columnNum={2}
                    square={false}
                    hasLine={false}
                    renderItem={item => (
                        <Flex className="group-item" justify="around" key={item.id}>
                            <div className="desc">
                                <p className="title">{item.title}</p>
                                <span className="info">{item.desc}</span>
                            </div>
                            <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
                        </Flex>
                    )}
                />
            </div>
            {/* 最新资讯 */}
            <div className="news">
                <h3 className="group-title">最新资讯</h3>
                <WingBlank size="md">
                    {newInfo.map(item => (
                        <div className="news-item" key={item.id}>
                            <div className="imgwrap">
                                <img
                                    className="img"
                                    src={`http://localhost:8080${item.imgSrc}`}
                                    alt=""
                                />
                            </div>
                            <Flex className="content" direction="column" justify="between">
                                <h3 className="title">{item.title}</h3>
                                <Flex className="info" justify="between">
                                    <span>{item.from}</span>
                                    <span>{item.date}</span>
                                </Flex>
                            </Flex>
                        </div>
                    ))}
                </WingBlank>
            </div>

        </div >
    )
}

export default Home